<template>
  <div class="fund">
    <!--    页面轮播图-->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(banner, index) in banners" :key="index">
        <van-image :src="banner.icon_url"></van-image>
      </van-swipe-item>
    </van-swipe>

    <!--    tab标签与内容-->
    <div class="tab">
      <van-tabs type="card">
        <van-tab
          v-for="(tab, index) in tabs"
          :key="index"
          :title="tab.tab_name"
        >
          <div class="tab-desc">
            <h6>{{ tab.comment }}</h6>
            <p>{{ tab.tips }}</p>
          </div>
          <van-cell-group inset>
            <van-cell v-for="(item, index) in tab.items" :key="index">
              <div class="fund-item">
                <van-image
                  width="2rem"
                  height="2rem"
                  :src="item.img_src"
                  :lazy-load="true"
                >
                </van-image>
                <span class="fund-name">{{ item.name }}</span>
                <span class="fund-pe">
                  <span class="value">{{ item.content[0].value }}</span>
                  <span class="desc">{{ item.content[0].desc }}</span>
                </span>
                <span class="fund-roe">
                  <span class="value">{{ item.content[1].value }}</span>
                  <span class="desc">{{ item.content[1].desc }}</span>
                </span>
              </div>
            </van-cell>
          </van-cell-group>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getFundBanner, getFundTablist } from "@/api/index.js";
import {
  Swipe,
  SwipeItem,
  Image as VanImage,
  Tab,
  Tabs,
  Cell,
  CellGroup,
} from "vant";

export default {
  name: "Fund",
  data() {
    return {
      banners: [],
      tabs: [],
    };
  },
  async created() {
    getFundBanner().then((result) => {
      this.banners = result.data.items;
    });

    // 这里我们要同时请求tablist的数据
    (async () => {
      let resultTab = await getFundTablist();
      this.tabs = resultTab.data.tab;
    })();
  },
  components: {
    "van-swipe": Swipe,
    "van-swipe-item": SwipeItem,
    "van-image": VanImage,
    "van-tabs": Tabs,
    "van-tab": Tab,
    "van-cell-group": CellGroup,
    "van-cell": Cell,
  },
};
</script>

<style lang="less" scoped>
.fund {
  ::v-deep .van-swipe__indicator {
    background-color: #666;
  }

  .tab-desc {
    h6 {
      margin: 0.3rem;
      font-size: 0.3rem;
      color: orangered;
    }
    p {
      margin: 0.3rem;
      font-size: 0.3rem;
      color: #999;
    }
  }

  .fund-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .fund-item > span {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .van-cell {
    padding: 0;
  }
}
</style>
